
/* 以下是exam3的css代码 */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"); 
/* 使用css文件导入样式 */
*
{
    margin: 0;
    padding: 0;
    /* 设置内外边距值 */
    font-family: 'Poppins', sans-serif;
    /* 指定元素的字体，如果第一个不支持，会依次往后选择可以执行的字体 */
}

body
{
    background: #000 url(bg.jpg);
    /* 设置背景样式 */
    background-attachment: fixed;
    /* 设置背景图像的位置 */
    background-blend-mode: hard-light;
    /* 将图片和颜色混合 */
}

.container{
    position: absolute;
    /* 绝对定位，相对于父级进行定位 */
    top: 80px;
    left: 100px;
    right: 100px;
    bottom: 80px;
    /* 根据父级设置位置 */
    background: url(bg.jpg);
    /* 设置背景图片 */
    background-attachment: fixed;
    /* 设置背景图片的位置 */
    display: flex;
    /* 确定对齐方式，并且可以根据不同页面进行变化 */
    justify-content: center;
    /* 水平布局 */
    align-items: center;
    /* 中心对齐 */
    flex-direction: column;
    /* 灵活的项目将垂直显示，正如一个列一样 */
    box-shadow: 0 50px 50px rgba(0,0,0,0.5),
                0 0 0 100px rgba(0,0,0,.1);
                /* 阴影的属性量 */
}

.container h2 {
    text-align: center;
    /* 中心对齐 */
    font-size: 10em;
    /* 设置字体大小和行高以及字体 */
    line-height: 0.7em;
    color: #333;
    margin-top: -80px;
    /* 外上边距 */
}

.container h2 span{
    display: block;
    /* 改变为块级元素 */
    font-weight: 300;
    /* 字体加粗 */
    letter-spacing: 6px;
    font-size: 0.2em;
    /* 字体大小 */
}
.countdown{
    display: flex;
    /* 设置对齐方式 */
    margin-top: 50px;
    /* 外上边距 */
}
.countdown div{
    position: relative;
    /* 相对于父级元素进行定位 */
    width: 100px;
    /* 宽度 */
    height: 100px;
    /* 高度，以及设置行高，背景颜色，中心对齐，字体颜色 */
    line-height: 100px;
    text-align: center;
    background: #333;
    color: #fff;
    margin: 0 15px;
    font-size: 3em;
    /* 设置字体大小，外边距，以及加粗 */
    font-weight: 500;
}
.countdown div:before{
    content: '';
    /* 伪类加入内容 */
    position: absolute;
    /* 绝对定位 */
    bottom: -30px;
    left: 0;
    /* 设置底边以及左边的距离 */
    width: 100%;
    height: 35px;
    /* 设置高度、宽度 */
    background: #ff0;
    /* 设置背景颜色 */
    color: #333;
    /* 设置字体颜色 */
    font-size: 0.35em;
    /* 设置字的大小，行高，字体加粗 */
    line-height: 35px;
    font-weight: 300;
}
.container #day:before{
    content: 'Days';
    /* 伪类，之前加入Days
    以下都是伪类，分别在相应的id元素之前加入对应的内容 */
}
.container #hour:before{
    content: 'Hours';
}
.container #minute:before{
    content: 'Minutes';
}
.container #second:before{
    content: 'Seconds';
}
